<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 200px;
      height: 200px;
      background: red;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <script>
    function enablelongTap(ele) {
      // 创建一个事件（自定义事件）
      let event = new CustomEvent("长按")
      // 定义事件在什么时候执行

      let timer = 0;
      // let isLongTap = false;

      // 当鼠标按下
      ele.addEventListener('mousedown', () => {
        // idLongTap = true
        clearTimeout(timer)
        // 500ms之后触发事件
        timer = setTimeout(() => {
          // if (isLongTap) {
          ele.dispatchEvent(event)
          // }
        }, 500);
        // 移动的情况，就清除，可能是滑屏，就不是长按了
        let move = () => {
          clearTimeout(timer)
        }
        // 结束
        let end = () => {
          // 清除定时器，就不触发【长按】事件了
          clearTimeout(timer)
          // 解绑事件
          document.removeEventListener('mousemove', move)
          document.removeEventListener('mouseup', end)
        }
        // 如果 鼠标移动，就调用移动函数，清除定时器
        document.addEventListener('mousemove', move)
        // 如果 鼠标放开，就调用结束函数，清除定时器，解绑事件
        document.addEventListener('mouseup', end)
      })
    }



    {
      let box = document.querySelector("#box");
      enablelongTap(box)
      box.addEventListener('长按', () => {
        console.log('这是一个长按事件')
      })
    }
  </script>
</body>

</html>